<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">
    <style>
        .row .bg-emp{
            line-height: 56px;
        }
    </style>
</head>
<body>
<div th:insert="fragment/header :: top-header"></div>
<div class="container">
    <div class="row text-center"> </div>
    <hr>
    <div class="row">
        <div class=" col-md-4 card-body card">
            <h5 class="card-title alert-dark"><strong>个人卡</strong></h5>
            <img class="card-img card-img-top" src="images/visa_1.jpg" alt="Card image cap"> </div>
        <div class="col-md-4 card-body card">
            <h5 class="card-title alert-dark"><strong>家庭卡</strong></h5>
            <img class="card-img card-img-top" src="images/visa_2.jpg" alt="Card image cap"> </div>
        <div class="col-md-4 card-body card">
            <h5 class="card-title alert-dark"><strong>ETC使用卡</strong></h5>
            <img class="card-img card-img-top" src="images/etc.jpg" alt="Card image cap"> </div>
    </div>
    <div class="row card-header">积分</div>
    <div class="container">
        <div class="row" style="padding: 10px 0">
            <div class="col-2">
                <a class="btn btn-info btn-lg" th:href="@{/getPointInfo(user_id = ${user_info.user_id})}" role="button">积分详情</a>
            </div>
        </div>
    </div>
<!--    <div class="row card-header">申请</div>-->
<!--    <div class="container">-->
<!--        <div class="row">-->
<!--            <div class="col-2">-->
<!--                <a class="btn btn-info btn-lg" href="#" role="button">确认文件等级</a>-->
<!--            </div>-->
<!--            <div class="col-2">-->
<!--                <a class="btn btn-info btn-lg" href="#" role="button">显示结算信息</a>-->
<!--            </div>-->
<!--            <div class="col-2">-->
<!--                <a class="btn btn-info btn-lg" href="#" role="button">查询</a>-->
<!--            </div>-->
<!--            <div class="col-2">-->
<!--                <a class="btn btn-info btn-lg" href="#" role="button">重新发卡</a>-->
<!--            </div>-->
<!--            <div class="col-2">-->
<!--                <a class="btn btn-info btn-lg" href="#" role="button">取消</a>-->
<!--            </div>-->
<!--            <div class="col-2">-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
    <hr>
    <div class="row card-header">注册信息</div>
    <div class="container">
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">电子邮件地址</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <label th:text="${user_info.user_account}">yamata.taro@h.co.jp</label>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
        <br>
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">地址</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <label th:text="${user_info.user_address}">1980-12-31</label>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
        <br>
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">电话</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <label th:text="${user_info.user_tel}">080-1234-5678</label>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
    </div>
    <hr>
    <div class="row card-header">关于您本人</div>
    <div class="container">
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">用户ID</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <label th:text="${user_info.user_id}">8888888888</label>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">姓名</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <P th:text="${user_info.user_name}">男性</P>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
        <br/>
        <div class="row">
            <div class="col-2 alert-danger">
                <p>
                <ul class="list-inline">
                    <li class="list-inline-item">性別</li>
                </ul>
                </p>
            </div>
            <div class="col-4 bg-emp">
                <P th:text="${user_info.user_age}">男性</P>
            </div>
            <div class="col-6 bg-emp"></div>
        </div>
    </div>
    <hr>
    <div class="row card-header">名下已有卡</div>
    <div class="container">
        <div class="row">
            <div class=" col-md-4 card-body card" th:each="item : ${user_card_list}">
                <a th:href="@{'/cardDetail?cardId='+${item.card_id} + '&userId='+ ${user_info.user_id}}">
                    <h5 class="card-title alert-dark"><strong th:text="${item.card_name}"></strong></h5>
                    <img class="card-img card-img-top" th:src="${item.card_img}" alt="Card image cap">
                </a>
            </div>
        </div>
    </div>

    <div th:insert="fragment/footer :: footer"></div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
<script th:inline="javascript">
    console.log([[${user_card_list}]])
</script>
</body>
</html>